React use Hook Разпространение на грешки: Овладяване на веригата за грешки при зареждане на ресурси

Съвременните React приложения често разчитат на извличане на данни от различни източници – API, бази данни или дори локално хранилище. Когато тези операции за зареждане на ресурси се провалят, е изключително важно да се обработват грешките грациозно и да се осигури значимо изживяване за потребителя. Тази статия изследва как ефективно да управлявате и разпространявате грешки в React приложения, използвайки персонализирани hooks, граници на грешки и стабилна стратегия за обработка на грешки.

Разбиране на предизвикателството при разпространението на грешки

В типично дърво на React компоненти, грешките могат да възникнат на различни нива. Компонент, извличащ данни, може да срещне мрежова грешка, грешка при парсване или грешка при валидиране. В идеалния случай тези грешки трябва да бъдат хванати и обработени по подходящ начин, но простото регистриране на грешката в компонента, където тя произхожда, често е недостатъчно. Нужен ни е механизъм за:

• Съобщаване на грешката на централно място: Това позволява регистриране, анализи и потенциални повторни опити.
• Показване на удобно за потребителя съобщение за грешка: Вместо счупен потребителски интерфейс, информирайте потребителя за проблема и предложете възможни решения.
• Предотвратяване на каскадни откази: Грешка в един компонент не трябва да срива цялото приложение.

Тук идва на помощ разпространението на грешки. Разпространението на грешки включва предаване на грешката нагоре по дървото на компонентите, докато достигне подходяща граница за обработка на грешки. Границите на грешки на React са проектирани да улавят грешки, които възникват по време на рендиране, методи на жизнения цикъл и конструктори на техните дъщерни компоненти, но те не обработват по дефиниция грешки, хвърлени в асинхронни операции, като тези, задействани от useEffect. Тук персонализираните hooks могат да преодолеят пропастта.

Използване на персонализирани Hooks за обработка на грешки

Персонализираните hooks ни позволяват да капсулираме логика за многократно използване, включително обработка на грешки, в рамките на един, композируем модул. Нека създадем персонализиран hook, useFetch, който обработва извличането на данни и управлението на грешки.

Пример: Основен useFetch Hook

Ето опростена версия на useFetch hook:

            
import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        const json = await response.json();
        setData(json);
        setError(null); // Clear any previous errors
      } catch (e) {
        setError(e);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, loading, error };
}

export default useFetch;

            

              
                Copy
              
            
          

Този hook извлича данни от даден URL адрес и управлява състоянието на зареждане и потенциалните грешки. Променливата на състоянието error съдържа всяка грешка, която възникне по време на процеса на извличане.

Разпространение на грешката нагоре

Сега, нека подобрим този hook, за да разпространим грешката нагоре, използвайки контекст. Това позволява на родителските компоненти да бъдат уведомявани за грешки, случващи се в рамките на useFetch hook.

1. Създаване на контекст за грешки

Първо, създаваме React контекст, за да задържим функцията за обработка на грешки:

            
import { createContext, useContext } from 'react';

const ErrorContext = createContext(null);

export const ErrorProvider = ErrorContext.Provider;

export const useError = () => useContext(ErrorContext);

            

              
                Copy
              
            
          

2. Промяна на useFetch Hook

Сега, променяме useFetch hook, за да използваме контекста за грешки:

            
import { useState, useEffect } from 'react';
import { useError } from './ErrorContext';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [localError, setLocalError] = useState(null); // Local error state
  const handleError = useError(); // Get the error handler from context

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        const json = await response.json();
        setData(json);
        setLocalError(null);
      } catch (e) {
        setLocalError(e);
        if (handleError) {
          handleError(e); // Propagate the error to the context
        }
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url, handleError]);

  // Return both data and local error. Component can decide which to display.
  return { data, loading, localError };
}

export default useFetch;

            

              
                Copy
              
            
          

Забележете, че сега имаме две състояния на грешка: localError, управлявана вътре в hook, и грешката, разпространена през контекста. Използваме localError вътрешно, но до нея може да се получи достъп и за обработка на ниво компонент.

3. Обвиване на приложението с ErrorProvider

В корена на вашето приложение обвийте компонентите, които използват useFetch, с ErrorProvider. Това предоставя контекста за обработка на грешки на всички дъщерни компоненти:

            
import React, { useState } from 'react';
import { ErrorProvider } from './ErrorContext';
import MyComponent from './MyComponent';

function App() {
  const [globalError, setGlobalError] = useState(null);

  const handleError = (error) => {
    console.error("Error caught at the top level:", error);
    setGlobalError(error);
  };

  return (
    
      {globalError ? (
        
Error: {globalError.message}
      ) : (
        
      )}
    
  );
}

export default App;

            

              
                Copy
              
            
          

4. Използване на useFetch Hook в компонент

            
import React from 'react';
import useFetch from './useFetch';

function MyComponent() {
  const { data, loading, localError } = useFetch('https://api.example.com/data');

  if (loading) {
    return 
Loading...
;
  }

  if (localError) {
    return 
Error loading data: {localError.message}
;
  }

  return (
    

      
Data:
      
{JSON.stringify(data, null, 2)}
    
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

Обяснение

• Контекст за грешки: ErrorContext предоставя начин за споделяне на функцията за обработка на грешки (handleError) между компонентите.
• Разпространение на грешки: Когато възникне грешка в useFetch, се извиква функцията handleError, разпространявайки грешката до компонента App.
• Централизирана обработка на грешки: Компонентът App вече може да обработва грешката по централизиран начин, регистрирайки я, показвайки съобщение за грешка или предприемайки други подходящи действия.

Граници на грешки: Предпазна мрежа за неочаквани грешки

Въпреки че персонализираните hooks и контекстът предоставят начин за обработка на грешки от асинхронни операции, границите на грешки са от съществено значение за улавяне на неочаквани грешки, които могат да възникнат по време на рендиране. Границите на грешки са React компоненти, които улавят JavaScript грешки навсякъде в дървото на дъщерните си компоненти, регистрират тези грешки и показват резервен потребителски интерфейс вместо дървото на компонентите, което се е сринало. Те улавят грешки по време на рендиране, в методи на жизнения цикъл и в конструктори на цялото дърво под тях.

Създаване на компонент Граница на грешки

            
import React from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null, errorInfo: null };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true, error: error };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.error("Caught error in ErrorBoundary:", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return (
        

          
Something went wrong.
          

            {this.state.error && this.state.error.toString()}\n			

            {this.state.errorInfo && this.state.errorInfo.componentStack}
          
        
      );
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

            

              
                Copy
              
            
          

Използване на Границата на грешки

Обвийте всеки компонент, който потенциално може да хвърли грешка, с компонента ErrorBoundary:

            
import React from 'react';
import ErrorBoundary from './ErrorBoundary';
import MyComponent from './MyComponent';

function App() {
  return (
    

      
        
      
    
  );
}

export default App;

            

              
                Copy
              
            
          

Комбиниране на граници на грешки и персонализирани Hooks

За най-стабилна обработка на грешки, комбинирайте граници на грешки с персонализирани hooks като useFetch. Границите на грешки улавят неочаквани грешки при рендиране, докато персонализираните hooks управляват грешки от асинхронни операции и ги разпространяват нагоре. ErrorProvider и ErrorBoundary могат да съществуват съвместно; ErrorProvider позволява гранулирана обработка и отчитане на грешки, докато ErrorBoundary предотвратява катастрофални сривове на приложения.

Най-добри практики за обработка на грешки в React

• Централизирано регистриране на грешки: Изпращайте грешки към централна услуга за регистриране за наблюдение и анализ. Услуги като Sentry, Rollbar и Bugsnag са чудесни опции. Обмислете използването на ниво на регистриране (например, `console.error`, `console.warn`, `console.info`), за да разграничите тежестта на събитията.
• Удобни за потребителя съобщения за грешки: Показвайте ясни и полезни съобщения за грешки на потребителя. Избягвайте технически жаргон и предоставяйте предложения за разрешаване на проблема. Помислете за локализация: уверете се, че съобщенията за грешки са разбираеми за потребители на различни езици и културни контексти.
• Грациозна деградация: Проектирайте приложението си да деградира грациозно в случай на грешка. Например, ако конкретно API извикване се провали, скрийте съответния компонент или покажете контейнер вместо да сривате цялото приложение.
• Механизми за повторен опит: Внедрете механизми за повторен опит за преходни грешки, като например мрежови проблеми. Въпреки това, бъдете внимателни, за да избегнете безкрайни цикли на повторен опит, които могат да влошат проблема. Експоненциалното отстъпление е добра стратегия.
• Тестване: Тествайте старателно вашата логика за обработка на грешки, за да се уверите, че работи според очакванията. Симулирайте различни сценарии на грешки, като например мрежови откази, невалидни данни и грешки на сървъра. Обмислете използването на инструменти като Jest и React Testing Library, за да пишете модулни и интеграционни тестове.
• Мониторинг: Непрекъснато наблюдавайте приложението си за грешки и проблеми с производителността. Настройте сигнали, за да бъдете уведомявани, когато възникнат грешки, което ви позволява бързо да реагирате на проблемите.
• Помислете за сигурността: Предотвратете показването на чувствителна информация в съобщения за грешки. Избягвайте включването на стекове за проследяване или вътрешни подробности за сървъра в съобщения, насочени към потребителя, тъй като тази информация може да бъде експлоатирана от злонамерени актьори.

Разширени техники за обработка на грешки

Използване на глобално решение за управление на състоянието на грешки

За по-сложни приложения, обмислете използването на глобално решение за управление на състоянието като Redux, Zustand или Recoil, за да управлявате състоянието на грешки. Това ви позволява да осъществявате достъп и да актуализирате състоянието на грешки от всяко място във вашето приложение, предоставяйки централизиран начин за обработка на грешки. Например, можете да изпратите действие за актуализиране на състоянието на грешки, когато възникне грешка, и след това да използвате селектор, за да извлечете състоянието на грешки във всеки компонент.

Внедряване на персонализирани класове за грешки

Създайте персонализирани класове за грешки, за да представят различни видове грешки, които могат да възникнат във вашето приложение. Това ви позволява лесно да разграничавате различните видове грешки и да ги обработвате съответно. Например, можете да създадете клас NetworkError, клас ValidationError и клас ServerError. Това ще направи вашата логика за обработка на грешки по-организирана и лесна за поддръжка.

Използване на модел прекъсвач на верига

Моделът прекъсвач на верига е модел на проектиране, който може да помогне за предотвратяване на каскадни откази в разпределени системи. Основната идея е да се обвият извикванията към външни услуги в обект прекъсвач на верига. Ако прекъсвачът на веригата открие определен брой откази, той "отваря" веригата и предотвратява всякакви по-нататъшни извиквания към външната услуга. След определено време прекъсвачът на веригата "полуотваря" веригата и позволява единично извикване към външната услуга. Ако извикването е успешно, прекъсвачът на веригата "затваря" веригата и позволява всички извиквания към външната услуга да се възобновят. Това може да помогне на вашето приложение да не бъде затрупано от откази във външни услуги.

Съображения за интернационализация (i18n)

Когато работите с глобална аудитория, интернационализацията е от първостепенно значение. Съобщенията за грешки трябва да бъдат преведени на предпочитания от потребителя език. Помислете за използването на библиотека като i18next, за да управлявате ефективно преводите. Освен това, имайте предвид културните различия в начина, по който се възприемат грешките. Например, просто предупредително съобщение може да бъде интерпретирано по различен начин в различни култури, така че се уверете, че тонът и формулировката са подходящи за вашата целева аудитория.

Често срещани сценарии за грешки и решения

Мрежови грешки

Сценарий: API сървърът не е наличен или интернет връзката на потребителя е прекъсната.

Решение: Показване на съобщение, указващо, че има мрежов проблем, и предлага проверка на интернет връзката. Внедрете механизъм за повторен опит с експоненциално отстъпление.

Невалидни данни

Сценарий: API връща данни, които не съответстват на очакваната схема.

Решение: Внедрете валидиране на данни от страна на клиента, за да уловите невалидни данни. Показване на съобщение за грешка, указващо, че данните са повредени или невалидни. Обмислете използването на TypeScript, за да наложите типове данни по време на компилиране.

Грешки при удостоверяване

Сценарий: Токенът за удостоверяване на потребителя е невалиден или е изтекъл.

Решение: Пренасочете потребителя към страницата за влизане. Показване на съобщение, указващо, че сесията му е изтекла и трябва да влезе отново.

Грешки при оторизация

Сценарий: Потребителят няма разрешение да осъществява достъп до определен ресурс.

Решение: Показване на съобщение, указващо, че няма необходимите разрешения. Предоставете връзка за връзка с поддръжката, ако смятат, че трябва да имат достъп.

Грешки на сървъра

Сценарий: API сървърът среща неочаквана грешка.

Решение: Показване на общо съобщение за грешка, указващо, че има проблем със сървъра. Регистриране на грешката от страна на сървъра за целите на отстраняване на грешки. Обмислете използването на услуга като Sentry или Rollbar за проследяване на грешки на сървъра.

Заключение

Ефективната обработка на грешки е от решаващо значение за създаването на стабилни и удобни за потребителя React приложения. Чрез комбиниране на персонализирани hooks, граници на грешки и цялостна стратегия за обработка на грешки, можете да гарантирате, че вашето приложение грациозно обработва грешки и предоставя значимо изживяване за потребителя, дори по време на неуспехи при зареждане на ресурси. Не забравяйте да дадете приоритет на централизираното регистриране на грешки, удобните за потребителя съобщения за грешки и грациозната деградация. Следвайки тези най-добри практики, можете да изградите React приложения, които са устойчиви, надеждни и лесни за поддръжка, независимо от местоположението или произхода на вашите потребители.